<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>设计师列表</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="designer inner_page designer_list">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        <a href="index.html" class="home"></a>
        <div class="header_search">
            <form action="">
                <input type="text" placeholder="输入商品，公司，设计师搜索">
                <input type="submit" value="">
            </form>
        </div>
    </header>

    <section class="main">
        <div class="screen">
            <form action="" class="screen_form">
                <ul class="screen wrapper">
                    <li>
                        <a href="javascript:void(0)">设计类型</a>
                        <div class="mask">
                            <div class="sub_menu">
                                <div class="container">
                                    <input type="radio" value="全部" id="total" name="type"><label for="total">全部</label>
                                    <input type="radio" value="室内设计" id="indoor" name="type"><label for="indoor">室内设计</label>
                                    <input type="radio" value="景观设计" id="sight" name="type"><label for="sight">景观设计</label>
                                    <input type="radio" value="庭院设计" id="court" name="type"><label for="court">庭院设计</label>
                                    <input type="radio" value="其他设计" id="other" name="type"><label for="other">其他设计</label>
                                </div>


                            </div>
                        </div>

                    </li>
                    <li>
                        <a href="javascript:void(0)">设计师职称</a>
                        <div class="mask">
                            <div class="sub_menu">
                                <div class="container">
                                    <input type="radio" value="全部" id="total1" name="title"><label for="total1">全部</label>
                                    <input type="radio" value="设计总监" id="major" name="title"><label for="major">设计总监</label>
                                    <input type="radio" value="首席设计师" id="chief" name="title"><label for="chief">首席设计师</label>
                                    <input type="radio" value="资深设计师" id="exp" name="title"><label for="exp">资深设计师</label>
                                    <input type="radio" value="高级设计师" id="senior" name="title"><label for="senior">高级设计师</label>
                                    <input type="radio" value="中级设计师" id="mid" name="title"><label for="mid">中级设计师</label>
                                    <input type="radio" value="普通设计师" id="gerneral" name="title"><label for="gerneral">普通设计师</label>
                                </div>


                            </div>
                        </div>

                    </li>
                    <li>
                        <a href="javascript:void(0);">设计风格</a>
                        <div class="mask">
                            <div class="sub_menu">
                                <div class="container">
                                    <input type="radio" value="全部" id="total2" name="style"><label for="total2">全部</label>
                                    <input type="radio" value="美式" id="amer" name="style"><label for="amer">美式</label>
                                    <input type="radio" value="法式" id="fran" name="style"><label for="fran">法式</label>
                                    <input type="radio" value="中式" id="chin" name="style"><label for="chin">中式</label>
                                    <input type="radio" value="北欧" id="nore" name="style"><label for="nore">北欧</label>
                                    <input type="radio" value="宜家" id="ikea" name="style"><label for="ikea">宜家</label>
                                    <input type="radio" value="古典" id="clas" name="style"><label for="clas">古典</label>
                                    <input type="radio" value="地中海" id="medi" name="style"><label for="medi">地中海</label>
                                    <input type="radio" value="法式1" id="fran1" name="style"><label for="fran1">法式1</label>
                                </div>


                            </div>
                        </div>

                    </li>
                </ul>
            </form>

        </div>
        <ul class="des_list container">
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
            <li><a href="javascript:void(0)">
                <div class="pic">
                    <img src="img/tanbo.jpg" alt="">
                </div>
                <p><span>唐博</span>高级设计师</p>
            </a></li>
        </ul>

        <div class="container">

        </div>


    </section>
    <div class="fix_nav">
        <div class="wrapper">
            <ul class="container">
                <li>
                    <a href="javascript:void(0)" class="home active">
                        首页
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="class">
                        分类
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="activity_center">
                        活动中心
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="cart">
                        购物车
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="mine">
                        我的
                    </a>
                </li>
            </ul>

        </div>

    </div>

</body>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        $(".screen li a").click(function(event){

            var $parent=$(this).parent();
            $parent.find(".mask").toggle();
            $parent.find(".sub_menu").slideToggle();
            $parent.siblings("li").find(".sub_menu").hide();
            $parent.siblings("li").find(".mask").hide();
        });
    });
</script>
</html>